<template>
    <div v-if="UserStore.userInfo.Id">
    <h2>门店列表</h2>
    显示用户信息:{{ UserStore.userInfo.UserName }}

    <input type="button" value="增加" class="btn btn-primary" @click="add">
       <div>
        门店名称:
        <input type="text" v-model="quertInfo.shopName" >
        开业时间:
        <input type="date" v-model="quertInfo.date1">
        <input type="button" value="查询" class="btn btn-primary" @click="show">
        <input type="button" value="批量删除" class="btn btn-danger" @click="delAll">
        <input type="button" value="批量启用" class="btn btn-info" @click="UpdateStateAll(1)">
        <input type="button" value="批量禁用" class="btn btn-warning" @click="UpdateStateAll(0)">
       </div>

    <table class="table table-bordered">
        <tbody>
            <tr>
                <td><input type="checkbox" v-model="checked" @click="checkAll"></td>
                <td>Id</td>
                <td>门店名称</td>
                <td>分店名称</td>
                <td>照片</td>
                <td>是否启用</td>
                <td>开业时间</td>
                <td>特色</td>
                <td>地址</td>          
                <td>类型</td>
                <td>介绍</td>
                <td>操作</td>
       
            </tr>

            <tr v-for="item in data.list" :key="item.Id" @change="checkone">
                <td><input type="checkbox" v-model="ids" :value="item.Id"></td>
                <td>{{item.Id}}</td>
                <td>{{item.ShopName}}</td>
                <td>{{item.BranchName}}</td>
                <td>
                    <img :src="item.Photo" alt="" width="100" height="100">
                </td>
                <td>{{item.State?"启用":"禁用"}}</td>
                <td>{{item.BeginTime}}</td>
                <td>{{item.Feature}}</td>
                <td>{{item.Name}}</td>
                <td>
                    <span v-if="item.ShopType==1">普通酒店</span>
                    <span v-if="item.ShopType==2">三星酒店</span>
                    <span v-if="item.ShopType==3">五星酒店</span>
                    <span v-if="item.ShopType==4">电竞酒店</span>
                    <span v-if="item.ShopType==5">商务酒店</span>
                    <span v-if="item.ShopType==6">民宿酒店</span>
              

                </td>
                <td>{{item.Desc}}</td>
                <td>
                    <input type="button" value="详情" class="btn btn-primary" @click="detail(item.Id)">
                    <input type="button" value="修改" class="btn btn-primary" @click="upd(item.Id)">
                    <input type="button" value="删除" class="btn btn-danger">
                    <input type="button" v-if="item.State==0" value="启用" @click="updateState(item.Id,1)" class="btn btn-primary">
                    <input type="button" v-if="item.State==1" value="禁用" @click="updateState(item.Id,0)" class="btn btn-primary">
                </td>
       
            </tr>
        </tbody>
    </table>
    <div>
        <span>共<b> {{ data.totalCount }}</b>条</span>
        <span>共 <b>{{ data.totalPage }}</b>页</span>
        <span>每页显示<b>{{ quertInfo.pageSize }}</b>条</span>
        <span>当前第<b>{{ quertInfo.pageIndex }}</b>页/ <b>{{ data.totalPage }}</b>页</span>
        <select v-model="quertInfo.pageSize" @change="show">
            <option :value="item" v-for="item in arr" :key="item">每页{{ item }}条</option>
        </select>
        <input type="button" value="首页" @click="goPage(1)" >
        <input type="button" value="下一页" @click="goPage(quertInfo.pageIndex+1)">
        
        <span v-for="item in data.totalPage" @click="goPage(item)">{{ item }}</span>

        <input type="button" value="上一页" @click="goPage(quertInfo.pageIndex-1)">
        <input type="button" value="尾页" @click="goPage(data.totalPage)">

        <input type="number" v-model="quertInfo.pageIndex">
        <input type="button" value="跳转" @click="goPage(quertInfo.pageIndex)">
    </div>
    </div>
    <div v-else>您还没有登录</div>
</template>

<script setup lang="ts">
import{ref,reactive,onMounted} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import axios from 'axios';
import moment from 'moment';
import {useUserStore} from '@/stores/user'
const UserStore=useUserStore();

const router=useRouter();
const route=useRoute();


//数据
//声明一个变量获取门店列表时间向后端传递的参数
let quertInfo:any=reactive({
    pageIndex:1,
    pageSize:2,
    shopName:'',
    date1:'',
});
//声明一个变量村塾后端返回的门店数据
let data:any=reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})
//页容量
let arr=ref([2,4,6,8,10]);


//声明一个变量控制复选框选中与没选中
let checked=ref(false);

//声明多个变量控制复选框选中与没选中
let ids=ref([]);




//生命周期
onMounted(()=>{
    showlist();
})


//函数

const detail=(id:any)=>{
    router.push({
        path:'/shopdetail',
        query:{
            id:id,
        }
    })
}

//返填
const upd=(id:any)=>{
    router.push({
        path:'/shopUpd',
        query:{
            id:id,
        }
    })
}


//批量修改状态
const UpdateStateAll=(state:any)=>{
    if(confirm("确认修改状态吗?")){
        axios({
            method:'put',
            url:'/api/Shop/UpdateStateAll',
            params:{
                ids:ids.value.toString(),
                state:state,
            }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("修改成功");
                checked.value=false;
                ids.value=[];
                showlist();
            }
            else{
                alert("修改失败");
                checked.value=false;
                ids.value=[];
            }
        })
        .catch()
    }
}



//批量删除
const delAll=()=>{
    //1友好提示 必选一项
    if(ids.value.length==0){
        alert("必选一项");
        return;
    }
    //2.要不要删
    if(confirm("确认删除吗")){
        axios({
                url:'/api/Shop/DelAllShop',
                method:'delete',
                params:{
                    ids:ids.value.toString(),
                }
        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("删除成功");
                checked.value=false;//控制最上面的复选框选择与不选中
                showlist();
            }
            else{
                alert("删除失败");
                checked.value=false;
                return;
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }

   
}






const checkone=()=>{
    //思路:ids 的长度和data.list的长度一致 checked的值为true 否则为false
    if(ids.value.length==data.list.length){
        checked.value=true;
    }
    else{
        checked.value=false;
    }

}

const checkAll=()=>{
    //1.先让自己全选与全不选
    // if(checked.value=false){
    //     checked.value=false;
    // }
    // else{
    //     checked.value=true;
    // }
    checked.value=!checked.value;
    if(checked.value==true)
    {
        //将单个复选框里的id放到ids里去 将当前页面的列表里的id放到ids里去
        ids.value=data.list.map((item:any)=>{
            return item.Id;
        });
    }
    else{
        ids.value=[];
    }
    console.log(ids.value)

}

const updateState=(id:any,State:any)=>{
    if(confirm("确认修改吗?")){
        axios({
            method:'put',
            url:'/api/Shop/UpdateShopState',
            params:{
                id:id,
                state:State,
            }

        })
        .then(res=>{
            console.log(res);
            if(res.data>0){
                alert("修改成功");
                showlist();
            }
            else{
                alert("修改失败");
            }
        })
        .catch(err=>{
            console.log(err);
        })
    }
}


//查询 +页容量
const show=()=>{
    quertInfo.pageIndex=1;
    showlist();
}


//分页
const goPage=(num:any)=>{
    if(num<1){
        quertInfo.pageIndex=num;
       showlist();
    }
    if(num>data.totalCount){
        quertInfo.pageIndex=data.totalPage;
    }
    quertInfo.pageIndex=num;
    showlist();
}

const add=()=>{
    router.push('/shopAdd');
}

const showlist=()=>{
    axios({
        method:'get',
        url:'/api/Shop/GetShopList',
        params:
            quertInfo,
        
    })
    .then(res=>{
        console.log(res);
        data.list=res.data.list
        data.totalCount=res.data.totalCount
        data.totalPage=res.data.totalPage

    })
    .catch(err=>{
        console.log(err);
    })
}




</script>

<style scoped>
input[type=button]{
    margin: 0 20px;
}
span{
    margin: 5px;
}
</style>